import logo from './logo.svg';
import './App.less';
import React, {useState, useRef, Component} from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function App() {
  const [count, setcount] = useState(0)
  const handleAlert = () => {
    setTimeout(() => {

      alert(`this count = ${count}`)
    }, 3000)
  }
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p style={{color:'#000'}}>
          Edit {count}and save to reload.
        </p>
        <button
          className="App-link"
          onClick={() => setcount(count + 1)}
        >
          Learn React
        </button>
        <App1/>
        <button onClick={handleAlert}> alert</button>
      </header>
    </div>
  );
}
class Input extends Component {
  constructor() {
    super()
    this.inputRef = React.createRef()
    console.log('inpur')
    this.focusInput = this.focusInput.bind(this)
    
  }
  focusInput() {
    this.inputRef.current.focus()
  }
  getSnapshotBeforeUpdate() {
    return 123
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(prevProps, prevState, snapshot)
  }
  render() {
    console.log('render')
    return (
      <div>
        <input type="text" ref={this.inputRef} onInput={() => console.log(this.inputRef.current)}/>
      </div>
    )
  }
}

function Index() {
	return <div>首页</div>;
}
function News2(props) {
  console.log(props.match)
  return <div>
    新闻
    <News/>
  </div>;
}
function App1(props) {
  return (
    <Router>
      <div>
        <Link to="/index">首页</Link>
        <Link to="/news2">新闻</Link>
      </div>
      <div>
        <Route path="/index" component={Index}/>
        <Route path="/news2" component={News}/>
      </div>
    </Router>
  );
}

function News(props) {
  return (
    <div>
      <div>
        <Link to={`${props.match.url}/company`}>公司新闻</Link>
        <Link to={`${props.match.url}/industry`}>行业新闻</Link>
      </div>
      <div>
        <Route path={`${props.match.path}/company`} component={CompanyNews} />
        <Route path={`${props.match.path}/industry`} component={IndustryNews}/>  
      </div>	
    </div>
  );
}
function CompanyNews() {
	return <div>公司新闻1</div>
}
function IndustryNews() {
	return <div>行业新闻2</div>
}
export default App;
